<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-23 16:36:28
 -->
<template>
  <div class="app-container">
    <div class="clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <el-form
            class="fl form-no-bottom"
            :inline="true"
            :model="searchData"
            label-position="left"
            label-width="80px"
            @keydown.enter.native="btnSearch"
          >
            <el-form-item>
              <el-input
                v-model="searchData.keywords"
                clearable
                style="width: 360px"
                placeholder="按单据号,商品名,供应商,备注"
              />
              <el-button type="default" :loading="btnLoading.search" @click="btnSearch()">
                搜索
              </el-button>
              <el-button type="default" @click="isFilterOpen = !isFilterOpen">
                {{ btnFilterOpenText }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-button class="fr" type="primary" @click="btnAddData">新增进货订单</el-button>
        </div>
        <SearchFilter
          v-if="isFilterOpen"
          :search="btnFilterSearch"
          :clear="btnClearConditions"
        >
          <Conditions ref="conditions" />
        </SearchFilter>
      </el-card>
    </div>
    <div class="margin-t5">
      <vxe-grid
        ref="table"
        class="grid"
        border
        size="small"
        resizable
        highlight-hover-row
        :loading="tableLoading.loading"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.totalCount"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData, delData } from '@/api/bill/bill.js'
import { comboList } from '@/api/supplier'
import { getDelButton, getUpdateButton } from '@/components/Table/oper-btns.js'
import SearchFilter from '@/views/components/SearchFilter'
import Conditions from './conditions'
export default {
  name: 'CustomerList',
  filters: {
  },
  components: { SearchFilter, Conditions },
  mixins: [oftenuse],
  data() {
    return {
      currentId: null,
      searchData: {},
      optionsData: {},
      isFilterOpen: false,
      columnsData: [
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' },
                on: { click: () => { this.btnUpdateData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'billNo', title: '编号', width: 120 },
        { field: 'createTime', title: '创建日期', width: 150 },
        { field: 'auditStatus', title: '处理状态',
          slots: {
            default: (params) => {
              const { row, column } = params
              if (row[column.property] === '0') {
                return [<el-tag>未审核</el-tag>]
              }
              if (row[column.property] === '1') {
                return [<el-tag type='danger'>已审核</el-tag>]
              }
            }
          },
          width: 80
        },
        { field: 'supplierName', title: '供应商名称', showOverflow: true },
        { field: 'goodsNamestr', title: '订单商品', showOverflow: true },
        { field: 'goodsQuantity', title: '商品数量', width: 120 },
        { field: 'amountPayable', title: '应付金额' }
      ]
    }
  },
  computed: {
    'btnFilterOpenText': function() {
      return this.isFilterOpen ? '收起筛选' : '展开筛选'
    }
  },
  watch: {
  },
  created() {
    this.listData()
  },
  methods: {
    btnAddData() {
      this.$router.push({
        name: 'PurchaseOrderAdd'
      })
    },
    btnUpdateData(row) {
      const { id } = row
      const params = { billId: id }
      this.$router.push({
        name: 'PurchaseOrderUpdate',
        query: params
      })
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.pageInfo.page = 1
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnClearConditions() {
      this.$refs.conditions.clearData()
    },
    btnFilterSearch() {
      this.setBtnLoading('search', true)
      this.pageInfo.page = 1
      const searchData = this.$refs.conditions.searchData
      const params = {
        data: searchData,
        pageInfo: this.pageInfo
      }
      this.listData(params).then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        this.$message.error('查询异常:', err.message)
        this.setBtnLoading('search', false)
      })
    },
    btnDelData(index, row) {
      this.isAllowDel().then(res => {
        this.currentId = row.id
        this.delListData([row.id])
      })
    },
    btnDetailData(index, row) {
      const purchaseId = row.id
      this.jump2purchaseDetail({ purchaseId, operation: 'update' })
    },
    // api
    getSuppilers(params) {
      comboList(params).then(res => {
        if (res.data.flag) {
          this.$set(this.optionsData, 'supplier', res.data.data)
        }
      })
    },
    listData(params = { data: this.searchData, pageInfo: this.pageInfo }) {
      if (params.data.date) {
        const data = params.data
        data.beginDate = data.date[0]
        data.endDate = data.date[1]
      }
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('table', false)
          if (res.data.flag) {
            this.setTableData('table', res.data.data)
            this.pageInfo = res.data.pageInfo
          }
          resolve(res)
        }).catch(err => {
          reject(err)
          this.setTableLoading('table', false)
        })
      })
    },
    delListData(ids) {
      return delData(ids).then(res => {
        if (res.data.flag) {
          this.listData()
          this.$notify.success({ title: '删除成功！' })
        } else this.$notify.error({ title: '删除失败！', message: res.data.message || '' })
      }).catch(err => {
        this.$notify.error({ title: '删除异常！', message: err })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('customer', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.page = val
      this.listData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
